<script setup lang='ts'>
import { useGetAuthenticationMethod, useGetDetail, useProfileSave } from '@fl/api/man-api/jc-authentication'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

import { useStep } from './use-step'

const { stepMove } = useStep()

const { data } = useGetDetail()

const type = computed(() => {
    return 'open.auth.type'
})
const { data: authData } = useGetAuthenticationMethod(type)

const current = ref<any>({})
const detail = ref<any>({})

const tabs = ref([
    {
        active: false,
        ageing: '即时完成',
        authType: '0', // 认证方式
        img: 'https://public-obs-cdn.anjulian.com.cn/2024-06-03/1d61412c-e747-4fbb-a959-15d776f9dce1.png',
        require: '需填写法人实名手机号',
        require2: '需填写真实法人姓名、身份证号',
        title: '企业法人三要素认证',
    },
    {
        active: false,
        ageing: '即时完成',
        authType: '1',
        img: 'https://public-obs-cdn.anjulian.com.cn/2024-06-03/060e4090-fe44-4cb7-a78a-22a195e0923a.png',
        require: '人脸核身技术,秒级确认身份,认证过程安全有保障',
        require2: '该方式需企业法人亲自扫码校验',
        title: '企业法人人脸识别认证',
    },
    {
        active: false,
        ageing: '1-5个工作日完成',
        authType: '2',
        img: 'https://public-obs-cdn.anjulian.com.cn/2024-06-03/515f7dac-14ab-4be0-a95d-bd512c7c8f8a.png',
        require: '填写企业真实有效对公银行账户',
        require2: '使用对公账户向我司汇入一笔指定金额(小于1元)',
        title: '企业对公打款认证',
    },
])

const filteredTabs = computed(() => tabs.value.filter((v: any) => authData.value?.includes(v.authType)))

const { isPending, mutate } = useProfileSave()

function nextStep() {
    const authType: any = current.value?.authType ?? ''
    if (!authType && authType !== 0) {
        ElMessage.error('请选择认证方式!')
        return
    }
    mutate({ ...detail.value, authType }, {
        onSuccess: () => {
            stepMove({ authType, step: 3 })
        },
    })
}

function setCurrent(authType: any) {
    tabs.value.forEach((v: any) => {
        v.active = false

        if (v.authType === authType) {
            v.active = true
            current.value = v
        }
    })
}

function tabClick(item: any) {
    if (item.authType === '1') {
        ElMessage.error('功能开发中，请选择其他认证方式!')
        return
    }

    setCurrent(item.authType)
}

watchEffect(() => {
    if (data.value) {
        detail.value = data.value
        // 认证方式回显
        const authType = data.value.authType === null ? '' : data.value.authType.toString()
        setCurrent(authType)
    }
})
</script>

<template>
    <div class="mt-40 flex justify-start">
        <div v-for="(item, index) in filteredTabs"
             :key="index"
             class="px-20 py-16 mr-40 bg-#fff rounded-4 h-218 w-410 cursor-pointer"
             :class="{ 'border-#DA0004 border-1 bg-#FFF0F0': item.active }"
             style="box-shadow: 0 4px 10px 0 #DBDBDB;"
             @click="tabClick(item)"
        >
            <div class="flex justify-between items-start">
                <div>
                    <p class="mb-8 text-20 c-#1D2129 font-600"
                       :class="{ 'border-#DA0004': item.active }"
                    >
                        {{ item.title }}
                    </p>

                    <p v-if="item.authType === '2'"
                       class="p-8 mb-8 bg-#FFF0F0 rounded-4 text-14 c-#DA0004"
                    >
                        外资企业请选择企业对公打款认证方式
                    </p>

                    <p class="text-14 c-#4E5969 flex items-center">
                        <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-03/d9773af1-6f1c-40c4-8f5c-f623e2cd1af2.png"
                             alt=""
                             class="mr-12 h-16 w-16"
                        >

                        <span>{{ item.ageing }}</span>
                    </p>
                </div>

                <img :src="item.img"
                     class="h-60 w-60"
                     alt=""
                >
            </div>

            <div class="text-16 c-#4E5969"
                 :class="item.authType === '2' ? 'mt-30' : 'mt-68'"
            >
                <p class="mb-8">
                    {{ item.require }}
                </p>

                <p>{{ item.require2 }}</p>
            </div>
        </div>
    </div>

    <div class="mb-60 mt-50 text-center">
        <ElButton @click="() => stepMove({ step: 1 }) ">
            上一步
        </ElButton>

        <ElButton v-loading="isPending"
                  type="primary"
                  @click="nextStep"
        >
            下一步
        </ElButton>
    </div>
</template>

<style lang="less" scoped></style>
